<%--
  Created by IntelliJ IDEA.
  User: Vadim
  Date: 6/21/14
  Time: 7:10 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>

<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Create Blog</title>
    <!-- Make sure the path to CKEditor is correct. -->
    <link rel="stylesheet" href="../content/style/style.css">
    <%--<script src="http://code.jquery.com/jquery-1.9.0.js"></script>--%>
    <script src="../content/scripts/jquery.min.js"></script>
    <script src="../content/scripts/ckeditor/ckeditor.js"></script>

    <script type='text/javascript'>
        function setEditorHeight(){
            console.log("Start");
            var bodyHeight = 0;

            if(typeof(window.innerWidth) == 'number') //Non-IE
                bodyHeight = window.innerHeight;
            else if(document.documentElement && document.documentElement.clientHeight) //IE 6+ 'stds compliant mode'
                bodyHeight = document.documentElement.clientHeight;
            else if( document.body && document.body.clientHeight) { //IE 4 compatible
                bodyHeight = document.body.clientHeight;
            }
            console.log(bodyHeight);
            contentEditor.config.height = (bodyHeight - 40) + 'px';

        }
        function deleteBlogById(blogId, blogTitle){
            if (confirm('Are you sure you want to delete blog "' + blogTitle + '"?')) {
                $.ajax({
                    type: "post",
                    url: '/securepages/blog_deleter.do',
                    data: {
                        blogId: blogId
                    },
                    success: function (result) {
                        if(result.error){
                            alert("deleted with errors:" + result.error);
                        } else {
                            console.log(result.message);
                            window.location = "/securepages/blog_creator.do";
                        }
                    },
                    error: function (result) {
                        alert("error happen");
                    }
                });
            }
        }
    </script>
</head>
<body onload="setEditorHeight()">
<div id="container">
    <div id="header">
        <jsp:include page="/publicpages/common/header.jsp"/>
    </div>
    <div id="body">

    <form action="/securepages/blog_creator.do" method="post">
        <input type="hidden" name="blogid" value="${blogid}">
        <table style="margin-left:50px;margin-right: 50px;margin-bottom: 50px;margin-top: 50px;">
            <colgroup>
                <col span="1" style="width: 20%;">
                <col span="1" style="width: 60%;">
            </colgroup>
            <tr>
                 <td rowspan="3" style="vertical-align: top;padding-top: 50px;padding-right: 20px;">
                     <hr/>
                     <div>
                         Actions:
                     </div>
                     <div>
                         <a href="/securepages/blog_creator.do">Create New Blog</a>
                     </div>
                     <hr/>
                     <div>
                         List of blogs:
                     </div>
                     <ul>
                         <c:forEach var="item" items="${blogs}">
                             <li>
                                 <div style="display: inline-table; width: 100%;">
                                     <div style="display: table-cell;float: left;">
                                         <a href="/securepages/blog_creator.do?showBogId=${item.id}">${item.blogTitle}</a>
                                     </div>
                                     <div style="display: table-cell;float: right;">
                                         <a href="javascript:void(0);" onclick="deleteBlogById(${item.id}, '${item.blogTitle}')" style="padding-left: 20px;float: right;">Delete</a>
                                     </div>
                                 </div>
                             </li>
                         </c:forEach>
                     </ul>
                     <hr/>
                 </td>
                <td style="padding-bottom: 20px;">
                    <div>
                        <div style="display: table-cell;padding-right: 20px;">Title:</div>
                        <div style="display: table-cell;">
                            <input style="width:500px;" type="text" name="blogtitle" id="blog-title" value="${blogtitle}">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea name="blogtext" id="blog-text" rows="20" cols="80" style="height: 100%;">
                        ${blogtext}
                    </textarea>
                    <script>

                        // Replace the <textarea id="editor1"> with a CKEditor
                        // instance, using default configuration.
                        var contentEditor = CKEDITOR.replace( 'blog-text',{
                            filebrowserUploadUrl: '/securepages/upload.do'
                        } );
                    </script>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 20px;">
                    <c:if test="${not empty errors}">
                        <div>
                            <span style="color: #ff0000;">${errors}</span>
                        </div>
                    </c:if>
                    <div>
                        <c:choose>
                            <c:when test="${not isPrivate}">
                                <input type="checkbox" name="isPrivate" value="true">
                            </c:when>

                            <c:otherwise>
                                <input type="checkbox" name="isPrivate" value="true" checked>
                            </c:otherwise>
                        </c:choose>
                         <label>Is Private</label>
                    </div>
                    <div style="float: right;">
                        <input type="submit" value="Save">
                    </div>
                </td>
            </tr>
        </table>
    </form>
    </div>
    <div id="footer">
        <jsp:include page="/publicpages/common/footer.jsp"/>
    </div>
</div>
</body>
</html>
